<template>
  <div class="app-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="page-title">
        <el-icon class="title-icon"><User /></el-icon>
        <span>用户管理</span>
      </div>
      <div class="page-description">管理系统中的所有用户信息，包括基本资料、账户状态等</div>
    </div>

    <!-- 搜索区域 -->
    <el-card class="search-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <el-icon class="header-icon"><Search /></el-icon>
          <span class="header-title">搜索筛选</span>
        </div>
      </template>
      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="80px" class="search-form">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="手机号" prop="phone">
              <el-input
                v-model="queryParams.phone"
                placeholder="请输入手机号"
                clearable
                @keyup.enter="handleQuery"
                class="search-input"
              >
                <template #prefix>
                  <el-icon><Phone /></el-icon>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="昵称" prop="nickname">
              <el-input
                v-model="queryParams.nickname"
                placeholder="请输入昵称"
                clearable
                @keyup.enter="handleQuery"
                class="search-input"
              >
                <template #prefix>
                  <el-icon><Avatar /></el-icon>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="性别" prop="gender">
              <el-select
                v-model="queryParams.gender"
                placeholder="请选择性别"
                clearable
                class="search-select enhanced-select"
              >
                <el-option label="未知" value="0">
                  <div class="custom-option">
                    <el-icon class="option-icon" style="color: #909399;"><QuestionFilled /></el-icon>
                    <span>未知</span>
                  </div>
                </el-option>
                <el-option label="男" value="1">
                  <div class="custom-option">
                    <el-icon class="option-icon" style="color: #409eff;"><User /></el-icon>
                    <span>男</span>
                  </div>
                </el-option>
                <el-option label="女" value="2">
                  <div class="custom-option">
                    <el-icon class="option-icon" style="color: #f56c6c;"><Female /></el-icon>
                    <span>女</span>
                  </div>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="出生日期" prop="birthDate">
              <el-date-picker 
                clearable
                v-model="queryParams.birthDate"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="请选择出生日期"
                class="search-date">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="用户角色" prop="userRole">
              <el-select
                v-model="queryParams.userRole"
                placeholder="请选择用户角色"
                clearable
                class="search-select enhanced-select"
              >
                <el-option label="普通用户" value="1">
                  <div class="custom-option">
                    <el-icon class="option-icon" style="color: #67c23a;"><User /></el-icon>
                    <span>普通用户</span>
                  </div>
                </el-option>
                <el-option label="红娘" value="2">
                  <div class="custom-option">
                    <el-icon class="option-icon" style="color: #f56c6c;"><Star /></el-icon>
                    <span>红娘</span>
                  </div>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="注册来源" prop="registerSource">
              <el-select
                v-model="queryParams.registerSource"
                placeholder="请选择注册来源"
                clearable
                class="search-select enhanced-select"
              >
                <el-option label="手机号" value="1">
                  <div class="custom-option">
                    <el-icon class="option-icon" style="color: #409eff;"><Phone /></el-icon>
                    <span>手机号</span>
                  </div>
                </el-option>
                <el-option label="微信" value="2">
                  <div class="custom-option">
                    <el-icon class="option-icon" style="color: #67c23a;"><ChatDotRound /></el-icon>
                    <span>微信</span>
                  </div>
                </el-option>
                <el-option label="QQ" value="3">
                  <div class="custom-option">
                    <el-icon class="option-icon" style="color: #409eff;"><Message /></el-icon>
                    <span>QQ</span>
                  </div>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="账号状态" prop="accountStatus">
              <el-select
                v-model="queryParams.accountStatus"
                placeholder="请选择账号状态"
                clearable
                class="search-select enhanced-select"
              >
                <el-option label="冻结" value="0">
                  <div class="custom-option">
                    <el-icon class="option-icon" style="color: #f56c6c;"><Lock /></el-icon>
                    <span>冻结</span>
                  </div>
                </el-option>
                <el-option label="正常" value="1">
                  <div class="custom-option">
                    <el-icon class="option-icon" style="color: #67c23a;"><CircleCheck /></el-icon>
                    <span>正常</span>
                  </div>
                </el-option>
                <el-option label="注销" value="2">
                  <div class="custom-option">
                    <el-icon class="option-icon" style="color: #909399;"><CircleClose /></el-icon>
                    <span>注销</span>
                  </div>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否VIP" prop="isVip">
              <el-select
                v-model="queryParams.isVip"
                placeholder="请选择VIP状态"
                clearable
                class="search-select enhanced-select"
              >
                <el-option label="否" value="0">
                  <div class="custom-option">
                    <el-icon class="option-icon" style="color: #909399;"><User /></el-icon>
                    <span>普通用户</span>
                  </div>
                </el-option>
                <el-option label="是" value="1">
                  <div class="custom-option">
                    <el-icon class="option-icon" style="color: #e6a23c;"><Trophy /></el-icon>
                    <span>VIP用户</span>
                  </div>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="search-buttons">
            <el-button type="primary" icon="Search" @click="handleQuery" class="search-btn">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery" class="reset-btn">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 操作按钮区域 -->
    <el-card class="toolbar-card" shadow="hover">
      <el-row :gutter="10" class="toolbar-row">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="Plus"
            @click="handleAdd"
            v-hasPermi="['user1:user1:add']"
            class="action-btn"
          >新增用户</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="success"
            plain
            icon="Edit"
            :disabled="single"
            @click="handleUpdate"
            v-hasPermi="['user1:user1:edit']"
            class="action-btn"
          >修改</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="Delete"
            :disabled="multiple"
            @click="handleDelete"
            v-hasPermi="['user1:user1:remove']"
            class="action-btn"
          >删除</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="Download"
            @click="handleExport"
            v-hasPermi="['user1:user1:export']"
            class="action-btn"
          >导出</el-button>
        </el-col>
        <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
    </el-card>

    <!-- 数据表格区域 -->
    <el-card class="table-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <el-icon class="header-icon"><Grid /></el-icon>
          <span class="header-title">用户列表</span>
          <div class="table-info">
            <el-tag type="info" size="small">共 {{ total }} 条记录</el-tag>
          </div>
        </div>
      </template>
      <el-table 
        v-loading="loading" 
        :data="user1List" 
        @selection-change="handleSelectionChange"
        class="modern-table enhanced-table responsive-table"
        stripe
        border
        :header-cell-style="{ 
          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', 
          color: '#ffffff', 
          fontWeight: 'bold',
          fontSize: '14px',
          textAlign: 'center'
        }"
        :row-style="{ height: '60px' }"
        :cell-style="{ padding: '12px 8px', textAlign: 'center' }"
        table-layout="auto"
        :fit="true"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="用户ID" align="center" prop="userId" min-width="80" />
        <el-table-column label="手机号" align="center" prop="phone" min-width="120" show-overflow-tooltip />
        <el-table-column label="昵称" align="center" prop="nickname" min-width="120" show-overflow-tooltip />
        <el-table-column label="性别" align="center" prop="gender" min-width="100">
          <template #default="scope">
            <div class="gender-cell">
              <el-icon v-if="scope.row.gender == 1" style="color: #409eff; margin-right: 4px;"><User /></el-icon>
              <el-icon v-else-if="scope.row.gender == 2" style="color: #f56c6c; margin-right: 4px;"><Female /></el-icon>
              <el-icon v-else style="color: #909399; margin-right: 4px;"><QuestionFilled /></el-icon>
              <el-tag 
                :type="scope.row.gender == 1 ? 'primary' : (scope.row.gender == 2 ? 'danger' : 'info')"
                size="small"
                effect="light"
                round
              >
                {{ scope.row.gender == 0 ? '未知' : (scope.row.gender == 1 ? '男' : (scope.row.gender == 2 ? '女' : '未知')) }}
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="头像" align="center" prop="avatarUrl" min-width="100">
          <template #default="scope">
            <div class="avatar-cell">
              <el-avatar 
                :src="scope.row.avatarUrl" 
                :size="45"
                shape="circle"
                fit="cover"
                class="user-avatar"
              >
                <el-icon size="20"><Avatar /></el-icon>
              </el-avatar>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="用户角色" align="center" prop="userRole" min-width="120">
          <template #default="scope">
            <div class="role-cell">
              <el-icon v-if="scope.row.userRole == 1" style="color: #67c23a; margin-right: 4px;"><User /></el-icon>
              <el-icon v-else-if="scope.row.userRole == 2" style="color: #f56c6c; margin-right: 4px;"><Star /></el-icon>
              <el-icon v-else style="color: #909399; margin-right: 4px;"><QuestionFilled /></el-icon>
              <el-tag 
                :type="scope.row.userRole == 1 ? 'success' : (scope.row.userRole == 2 ? 'danger' : 'info')"
                size="small"
                effect="light"
                round
              >
                {{ roleMap[scope.row.userRole] || '未知' }}
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="注册来源" align="center" prop="registerSource" min-width="120">
          <template #default="scope">
            <div class="source-cell">
              <el-icon v-if="scope.row.registerSource == 1" style="color: #409eff; margin-right: 4px;"><Phone /></el-icon>
              <el-icon v-else-if="scope.row.registerSource == 2" style="color: #67c23a; margin-right: 4px;"><ChatDotRound /></el-icon>
              <el-icon v-else-if="scope.row.registerSource == 3" style="color: #409eff; margin-right: 4px;"><Message /></el-icon>
              <el-icon v-else style="color: #909399; margin-right: 4px;"><QuestionFilled /></el-icon>
              <el-tag 
                :type="scope.row.registerSource == 1 ? 'primary' : (scope.row.registerSource == 2 ? 'success' : (scope.row.registerSource == 3 ? 'warning' : 'info'))"
                size="small"
                effect="light"
                round
              >
                {{ scope.row.registerSource == 1 ? '手机号' : (scope.row.registerSource == 2 ? '微信' : (scope.row.registerSource == 3 ? 'QQ' : '未知')) }}
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="注册时间" align="center" prop="registerTime" min-width="120">
          <template #default="scope">
            <el-text size="small" type="info">
              {{ parseTime(scope.row.registerTime, '{y}-{m}-{d}') }}
            </el-text>
          </template>
        </el-table-column>
        <el-table-column label="账号状态" align="center" prop="accountStatus" min-width="120">
          <template #default="scope">
            <div class="status-cell">
              <el-icon v-if="scope.row.accountStatus == 0" style="color: #f56c6c; margin-right: 4px;"><Lock /></el-icon>
              <el-icon v-else-if="scope.row.accountStatus == 1" style="color: #67c23a; margin-right: 4px;"><CircleCheck /></el-icon>
              <el-icon v-else-if="scope.row.accountStatus == 2" style="color: #909399; margin-right: 4px;"><CircleClose /></el-icon>
              <el-icon v-else style="color: #909399; margin-right: 4px;"><QuestionFilled /></el-icon>
              <el-tag 
                :type="scope.row.accountStatus == 1 ? 'success' : (scope.row.accountStatus == 0 ? 'danger' : 'info')"
                size="small"
                effect="light"
                round
              >
                {{ scope.row.accountStatus == 0 ? '冻结' : (scope.row.accountStatus == 1 ? '正常' : (scope.row.accountStatus == 2 ? '注销' : '未知')) }}
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="实名认证" align="center" prop="isVerified" min-width="100">
          <template #default="scope">
            <el-tag 
              :type="scope.row.isVerified == 1 ? 'success' : 'info'"
              size="small"
              effect="light"
            >
              {{ scope.row.isVerified == 1 ? '已认证' : '未认证' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="VIP状态" align="center" prop="isVip" min-width="120">
          <template #default="scope">
            <div class="vip-cell">
              <el-icon v-if="scope.row.isVip == 1" style="color: #e6a23c; margin-right: 4px;"><Trophy /></el-icon>
              <el-icon v-else style="color: #909399; margin-right: 4px;"><User /></el-icon>
              <el-tag 
                :type="scope.row.isVip == 1 ? 'warning' : 'info'"
                size="small"
                effect="light"
                round
              >
                {{ scope.row.isVip == 1 ? 'VIP' : '普通' }}
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="220" fixed="right">
          <template #default="scope">
            <div class="action-buttons enhanced-actions">
              <el-button 
                link 
                type="primary" 
                icon="View" 
                @click="handleView(scope.row)" 
                v-hasPermi="['user1:user1:query']"
                size="small"
                class="action-btn-link"
              >详情</el-button>
              <el-divider direction="vertical" />
              <el-button 
                link 
                type="success" 
                icon="Edit" 
                @click="handleUpdate(scope.row)" 
                v-hasPermi="['user1:user1:edit']"
                size="small"
                class="action-btn-link"
              >修改</el-button>
              <el-divider direction="vertical" />
              <el-button 
                link 
                type="danger" 
                icon="Delete" 
                @click="handleDelete(scope.row)" 
                v-hasPermi="['user1:user1:remove']"
                size="small"
                class="action-btn-link"
              >删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页组件 -->
      <div class="pagination-container enhanced-pagination">
        <div class="pagination-info">
          <el-text type="info" size="small">
            <el-icon style="margin-right: 4px;"><Document /></el-icon>
            显示第 {{ (queryParams.pageNum - 1) * queryParams.pageSize + 1 }} 到 {{ Math.min(queryParams.pageNum * queryParams.pageSize, total) }} 条，共 {{ total }} 条记录
          </el-text>
        </div>
        <pagination
          v-show="total>0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
          class="modern-pagination"
        />
      </div>
    </el-card>
    
    <!-- 添加或修改管理用户对话框 -->
    <el-dialog :title="title" v-model="open" width="85%" append-to-body :close-on-click-modal="false">
      <div style="max-height: 75vh; overflow-y: auto; padding-right: 10px;">
        <el-form ref="user1Ref" :model="form" :rules="rules" label-width="120px">
          <!-- 基本信息 -->
          <el-card class="box-card" style="margin-bottom: 20px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
            <template #header>
              <div class="card-header">
                <span style="font-weight: bold; color: #409EFF; font-size: 16px;">
                  <el-icon style="margin-right: 8px;"><User /></el-icon>
                  基本信息
                </span>
              </div>
            </template>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="手机号" prop="phone">
                  <el-input v-model="form.phone" placeholder="请输入手机号" clearable>
                    <template #prefix>
                      <el-icon><Phone /></el-icon>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="昵称" prop="nickname">
                  <el-input v-model="form.nickname" placeholder="请输入昵称" clearable>
                    <template #prefix>
                      <el-icon><Avatar /></el-icon>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="密码" prop="password">
                  <el-input v-model="form.password" type="password" placeholder="请输入密码" show-password clearable>
                    <template #prefix>
                      <el-icon><Lock /></el-icon>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="性别" prop="gender">
                  <el-select v-model="form.gender" placeholder="请选择性别" style="width: 100%" clearable>
                    <template #prefix>
                      <el-icon><Male /></el-icon>
                    </template>
                    <el-option label="未知" :value="0" />
                    <el-option label="男" :value="1" />
                    <el-option label="女" :value="2" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="出生日期" prop="birthDate">
                  <el-date-picker 
                    v-model="form.birthDate"
                    type="date"
                    placeholder="请选择出生日期"
                    style="width: 100%"
                    clearable>
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="头像" prop="avatarUrl">
                  <image-upload v-model="form.avatarUrl"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>

          <!-- 用户统计信息 -->
          <el-card class="box-card" style="margin-bottom: 20px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
            <template #header>
              <div class="card-header">
                <span style="font-weight: bold; color: #409EFF; font-size: 16px;">
                  <el-icon style="margin-right: 8px;"><DataAnalysis /></el-icon>
                  统计信息
                </span>
              </div>
            </template>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="粉丝数" prop="fan">
                  <el-input-number v-model="form.fan" :min="0" placeholder="请输入粉丝数" style="width: 100%" controls-position="right" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="被关注总数" prop="countFollow">
                  <el-input-number v-model="form.countFollow" :min="0" placeholder="请输入被关注总数" style="width: 100%" controls-position="right" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="被赞总数" prop="countLike">
                  <el-input-number v-model="form.countLike" :min="0" placeholder="请输入被赞总数" style="width: 100%" controls-position="right" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>

          <!-- 账户信息 -->
          <el-card class="box-card" style="margin-bottom: 20px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
            <template #header>
              <div class="card-header">
                <span style="font-weight: bold; color: #409EFF; font-size: 16px;">
                  <el-icon style="margin-right: 8px;"><Setting /></el-icon>
                  账户信息
                </span>
              </div>
            </template>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="用户角色" prop="userRole">
                  <el-select v-model="form.userRole" placeholder="请选择用户角色" style="width: 100%" clearable>
                    <el-option label="普通用户" :value="1" />
                    <el-option label="红娘" :value="2" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="注册来源" prop="registerSource">
                  <el-select v-model="form.registerSource" placeholder="请选择注册来源" style="width: 100%" clearable>
                    <el-option label="手机号" :value="1" />
                    <el-option label="微信" :value="2" />
                    <el-option label="QQ" :value="3" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="账号状态" prop="accountStatus">
                  <el-select v-model="form.accountStatus" placeholder="请选择账号状态" style="width: 100%" clearable>
                    <el-option label="冻结" :value="0" />
                    <el-option label="正常" :value="1" />
                    <el-option label="注销" :value="2" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="第三方平台ID" prop="openId">
                  <el-input v-model="form.openId" placeholder="请输入第三方平台ID" clearable />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="是否实名认证" prop="isVerified">
                  <el-select v-model="form.isVerified" placeholder="请选择" style="width: 100%" clearable>
                    <el-option label="否" :value="0" />
                    <el-option label="是" :value="1" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否VIP" prop="isVip">
                  <el-select v-model="form.isVip" placeholder="请选择" style="width: 100%" clearable>
                    <el-option label="否" :value="0" />
                    <el-option label="是" :value="1" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="VIP过期时间" prop="vipExpireTime">
                  <el-date-picker 
                    v-model="form.vipExpireTime"
                    type="date"
                    placeholder="请选择VIP过期时间"
                    style="width: 100%"
                    clearable>
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>

          <!-- 时间信息 -->
          <el-card class="box-card" style="margin-bottom: 20px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
            <template #header>
              <div class="card-header">
                <span style="font-weight: bold; color: #409EFF; font-size: 16px;">
                  <el-icon style="margin-right: 8px;"><Clock /></el-icon>
                  时间信息
                </span>
              </div>
            </template>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="注册时间" prop="registerTime">
                  <el-date-picker 
                    v-model="form.registerTime"
                    type="datetime"
                    placeholder="请选择注册时间"
                    style="width: 100%"
                    clearable>
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="最后登录时间" prop="lastLoginTime">
                  <el-date-picker 
                    v-model="form.lastLoginTime"
                    type="datetime"
                    placeholder="请选择最后登录时间"
                    style="width: 100%"
                    clearable>
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="最后登录IP" prop="lastLoginIp">
                  <el-input v-model="form.lastLoginIp" placeholder="请输入最后登录IP" clearable>
                    <template #prefix>
                      <el-icon><Monitor /></el-icon>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>

          <!-- 用户详细资料 -->
          <el-card class="box-card" style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
            <template #header>
              <div class="card-header">
                <span style="font-weight: bold; color: #409EFF; font-size: 16px;">
                  <el-icon style="margin-right: 8px;"><Document /></el-icon>
                  用户详细资料
                </span>
              </div>
            </template>
            <template v-if="tbUserProfileList && tbUserProfileList.length > 0">
              <div v-for="(profile, index) in tbUserProfileList" :key="index" style="margin-bottom: 20px;">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="真实姓名" prop="realName">
                      <el-input v-model="profile.realName" placeholder="请输入真实姓名" clearable />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="年龄" prop="age">
                      <el-input-number v-model="profile.age" :min="1" :max="120" placeholder="请输入年龄" style="width: 100%" controls-position="right" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="身高(cm)" prop="height">
                      <el-input-number v-model="profile.height" :min="100" :max="250" placeholder="请输入身高" style="width: 100%" controls-position="right" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="体重(kg)" prop="weight">
                      <el-input-number v-model="profile.weight" :min="30" :max="200" placeholder="请输入体重" style="width: 100%" controls-position="right" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="学历" prop="education">
                      <el-select v-model="profile.education" placeholder="请选择学历" style="width: 100%" clearable>
                        <el-option label="高中及以下" :value="1" />
                        <el-option label="大专" :value="2" />
                        <el-option label="本科" :value="3" />
                        <el-option label="硕士" :value="4" />
                        <el-option label="博士" :value="5" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="收入水平" prop="incomeLevel">
                      <el-select v-model="profile.incomeLevel" placeholder="请选择收入水平" style="width: 100%" clearable>
                        <el-option label="5k以下" :value="1" />
                        <el-option label="5k-10k" :value="2" />
                        <el-option label="10k-20k" :value="3" />
                        <el-option label="20k-50k" :value="4" />
                        <el-option label="50k以上" :value="5" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="公司" prop="company">
                      <el-input v-model="profile.company" placeholder="请输入公司" clearable />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="职位" prop="position">
                      <el-input v-model="profile.position" placeholder="请输入职位" clearable />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="工作城市" prop="workCity">
                      <el-input v-model="profile.workCity" placeholder="请输入工作城市" clearable />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="家乡" prop="hometown">
                      <el-input v-model="profile.hometown" placeholder="请输入家乡" clearable />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="婚姻状况" prop="maritalStatus">
                      <el-select v-model="profile.maritalStatus" placeholder="请选择婚姻状况" style="width: 100%" clearable>
                        <el-option label="未婚" :value="1" />
                        <el-option label="离异" :value="2" />
                        <el-option label="丧偶" :value="3" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="是否有子女" prop="hasChildren">
                      <el-select v-model="profile.hasChildren" placeholder="请选择" style="width: 100%" clearable>
                        <el-option label="无" :value="0" />
                        <el-option label="有" :value="1" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="住房情况" prop="houseStatus">
                      <el-select v-model="profile.houseStatus" placeholder="请选择住房情况" style="width: 100%" clearable>
                        <el-option label="租房" :value="1" />
                        <el-option label="有房贷款" :value="2" />
                        <el-option label="有房无贷款" :value="3" />
                        <el-option label="和家人同住" :value="4" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="车辆情况" prop="carStatus">
                      <el-select v-model="profile.carStatus" placeholder="请选择车辆情况" style="width: 100%" clearable>
                        <el-option label="无车" :value="1" />
                        <el-option label="有车有贷款" :value="2" />
                        <el-option label="有车无贷款" :value="3" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label="自我介绍" prop="selfIntroduction">
                      <el-input v-model="profile.selfIntroduction" type="textarea" :rows="3" placeholder="请输入自我介绍" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label="兴趣爱好" prop="hobby">
                      <el-input v-model="profile.hobby" placeholder="请输入兴趣爱好" clearable />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-divider v-if="index < tbUserProfileList.length - 1" />
              </div>
            </template>
            <template v-else>
              <el-empty description="暂无用户详细资料" />
            </template>
          </el-card>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer" style="text-align: center; padding: 20px 0;">
          <el-button type="primary" @click="submitForm" size="default" style="padding: 12px 30px; font-size: 14px;">
            <el-icon style="margin-right: 5px;"><Check /></el-icon>
            确 定
          </el-button>
          <el-button @click="cancel" size="default" style="padding: 12px 30px; font-size: 14px; margin-left: 15px;">
            <el-icon style="margin-right: 5px;"><Close /></el-icon>
            取 消
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 用户详情对话框 -->
    <el-dialog title="用户详情" v-model="detailVisible" width="80%" append-to-body :close-on-click-modal="false">
      <div style="max-height: 80vh; overflow-y: auto;">
        <!-- 基本信息 -->
        <el-card class="box-card" style="margin-bottom: 20px;">
          <template #header>
            <div class="card-header">
              <span style="font-weight: bold; color: #409EFF;">基本信息</span>
            </div>
          </template>
          <div style="display: flex; gap: 20px;">
            <!-- 头像区域 -->
            <div style="flex-shrink: 0;">
              <div style="text-align: center; margin-bottom: 10px;">
                <span style="font-weight: bold; color: #666;">头像</span>
              </div>
              <image-preview v-if="currentUser.avatarUrl" :src="currentUser.avatarUrl" :width="100" :height="100" />
              <div v-else style="width: 100px; height: 100px; border: 1px dashed #ddd; display: flex; align-items: center; justify-content: center; color: #999;">
                暂无头像
              </div>
            </div>
            <!-- 基本信息区域 -->
            <div style="flex: 1;">
              <el-descriptions :column="2" border>
                <el-descriptions-item label="用户ID">{{ currentUser.userId || '-' }}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{ currentUser.phone || '-' }}</el-descriptions-item>
                <el-descriptions-item label="昵称">{{ currentUser.nickname || '-' }}</el-descriptions-item>
                <el-descriptions-item label="性别">
                  <el-tag :type="currentUser.gender == 1 ? 'primary' : (currentUser.gender == 2 ? 'danger' : 'info')">
                    {{ genderMap[currentUser.gender] || '未知' }}
                  </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="出生日期" :span="2">{{ currentUser.birthDate ? parseTime(currentUser.birthDate) : '-' }}</el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
        </el-card>

        <!-- 统计信息 -->
        <el-card class="box-card" style="margin-bottom: 20px;">
          <template #header>
            <div class="card-header">
              <span style="font-weight: bold; color: #409EFF;">统计信息</span>
            </div>
          </template>
          <el-descriptions :column="3" border>
            <el-descriptions-item label="粉丝数">{{ currentUser.fan || 0 }}</el-descriptions-item>
            <el-descriptions-item label="被关注总数">{{ currentUser.countFollow || 0 }}</el-descriptions-item>
            <el-descriptions-item label="被赞总数">{{ currentUser.countLike || 0 }}</el-descriptions-item>
          </el-descriptions>
        </el-card>

        <!-- 账户信息 -->
        <el-card class="box-card" style="margin-bottom: 20px;">
          <template #header>
            <div class="card-header">
              <span style="font-weight: bold; color: #409EFF;">账户信息</span>
            </div>
          </template>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="用户角色">
              <el-tag :type="currentUser.userRole == 1 ? 'success' : (currentUser.userRole == 2 ? 'danger' : 'info')">
                {{ roleMap[currentUser.userRole] || '未知' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="注册来源">
              <el-tag :type="currentUser.registerSource == 1 ? 'primary' : (currentUser.registerSource == 2 ? 'success' : (currentUser.registerSource == 3 ? 'warning' : 'info'))">
                {{ registerSourceMap[currentUser.registerSource] || '未知' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="账号状态">
              <el-tag :type="currentUser.accountStatus == 1 ? 'success' : (currentUser.accountStatus == 0 ? 'danger' : 'info')">
                {{ accountStatusMap[currentUser.accountStatus] || '未知' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="第三方平台ID">{{ currentUser.openId || '-' }}</el-descriptions-item>
            <el-descriptions-item label="是否实名认证">
              <el-tag :type="currentUser.isVerified == 1 ? 'success' : 'info'">
                {{ verifiedMap[currentUser.isVerified] || '否' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="是否VIP">
              <el-tag :type="currentUser.isVip == 1 ? 'warning' : 'info'">
                {{ vipMap[currentUser.isVip] || '否' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="VIP过期时间" :span="2">{{ currentUser.vipExpireTime ? parseTime(currentUser.vipExpireTime) : '-' }}</el-descriptions-item>
          </el-descriptions>
        </el-card>

        <!-- 时间信息 -->
        <el-card class="box-card" style="margin-bottom: 20px;">
          <template #header>
            <div class="card-header">
              <span style="font-weight: bold; color: #409EFF;">时间信息</span>
            </div>
          </template>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="注册时间">{{ currentUser.registerTime ? parseTime(currentUser.registerTime) : '-' }}</el-descriptions-item>
            <el-descriptions-item label="最后登录时间">{{ currentUser.lastLoginTime ? parseTime(currentUser.lastLoginTime) : '-' }}</el-descriptions-item>
            <el-descriptions-item label="最后登录IP">{{ currentUser.lastLoginIp || '-' }}</el-descriptions-item>
            <el-descriptions-item label="创建时间">{{ currentUser.createdAt ? parseTime(currentUser.createdAt) : '-' }}</el-descriptions-item>
            <el-descriptions-item label="更新时间" :span="2">{{ currentUser.updatedAt ? parseTime(currentUser.updatedAt) : '-' }}</el-descriptions-item>
          </el-descriptions>
        </el-card>

        <!-- 用户详细资料 -->
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span style="font-weight: bold; color: #409EFF;">用户详细资料</span>
            </div>
          </template>
          <template v-if="currentUser.tbUserProfileList && currentUser.tbUserProfileList.length > 0">
            <div v-for="(profile, index) in currentUser.tbUserProfileList" :key="index" style="margin-bottom: 20px;">
              <el-descriptions :column="2" border>
                <el-descriptions-item label="真实姓名">{{ profile.realName || '-' }}</el-descriptions-item>
                <el-descriptions-item label="年龄">{{ profile.age || '-' }}</el-descriptions-item>
                <el-descriptions-item label="身高(cm)">{{ profile.height || '-' }}</el-descriptions-item>
                <el-descriptions-item label="体重(kg)">{{ profile.weight || '-' }}</el-descriptions-item>
                <el-descriptions-item label="学历">
                  {{ educationMap[profile.education] || '未知' }}
                </el-descriptions-item>
                <el-descriptions-item label="公司">{{ profile.company || '-' }}</el-descriptions-item>
                <el-descriptions-item label="职位">{{ profile.position || '-' }}</el-descriptions-item>
                <el-descriptions-item label="收入水平">
                  {{ incomeLevelMap[profile.incomeLevel] || '未知' }}
                </el-descriptions-item>
                <el-descriptions-item label="工作城市">{{ profile.workCity || '-' }}</el-descriptions-item>
                <el-descriptions-item label="家乡">{{ profile.hometown || '-' }}</el-descriptions-item>
                <el-descriptions-item label="婚姻状况">
                  {{ maritalStatusMap[profile.maritalStatus] || '未知' }}
                </el-descriptions-item>
                <el-descriptions-item label="是否有子女">{{ hasChildrenMap[profile.hasChildren] || '未知' }}</el-descriptions-item>
                <el-descriptions-item label="住房情况">
                  {{ houseStatusMap[profile.houseStatus] || '未知' }}
                </el-descriptions-item>
                <el-descriptions-item label="车辆情况">
                  {{ carStatusMap[profile.carStatus] || '未知' }}
                </el-descriptions-item>
                <el-descriptions-item label="自我介绍" :span="2">{{ profile.selfIntroduction || '-' }}</el-descriptions-item>
                <el-descriptions-item label="兴趣爱好" :span="2">{{ profile.hobby || '-' }}</el-descriptions-item>
                <el-descriptions-item label="创建时间">{{ profile.createdAt ? parseTime(profile.createdAt) : '-' }}</el-descriptions-item>
                <el-descriptions-item label="更新时间">{{ profile.updatedAt ? parseTime(profile.updatedAt) : '-' }}</el-descriptions-item>
              </el-descriptions>
            </div>
          </template>
          <template v-else>
            <el-empty description="暂无用户详细资料" />
          </template>
        </el-card>
      </div>
    </el-dialog>
  </div>
</template>

<script setup name="User1">
import { listUser1, getUser1, delUser1, addUser1, updateUser1 } from "@/api/user1/user1"
import { parseTime } from "@/utils/ruoyi"
import { Check, Close, User, Phone, Avatar, Lock, DataAnalysis, Setting, Clock, Monitor, Document, Search, Grid, Plus, Edit, Delete, Download, View, Refresh, Female, QuestionFilled, UserFilled, Star, Link, ChatDotRound, Message, CircleCheck, CircleClose, Trophy } from '@element-plus/icons-vue'

const { proxy } = getCurrentInstance()

const user1List = ref([])
const tbUserProfileList = ref([])
const open = ref(false)
const loading = ref(true)
const showSearch = ref(true)
const ids = ref([])
const checkedTbUserProfile = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const title = ref("")
const detailVisible = ref(false)
const currentUser = ref({})
const roleMap = {
  '1': '普通用户',
  '2': '红娘'
}

// 性别映射
const genderMap = {
  '0': '未知',
  '1': '男',
  '2': '女'
}

// 注册来源映射
const registerSourceMap = {
  '1': '手机号',
  '2': '微信',
  '3': 'QQ'
}

// 账号状态映射
const accountStatusMap = {
  '0': '冻结',
  '1': '正常',
  '2': '注销'
}

// 是否认证映射
const verifiedMap = {
  '0': '否',
  '1': '是'
}

// 是否VIP映射
const vipMap = {
  '0': '否',
  '1': '是'
}

// 婚姻状况映射
const maritalStatusMap = {
  '1': '未婚',
  '2': '已婚',
  '3': '离异',
  '4': '丧偶'
}

// 是否有子女映射
const hasChildrenMap = {
  '0': '否',
  '1': '是'
}

// 住房情况映射
const houseStatusMap = {
  '1': '租房',
  '2': '有房贷款',
  '3': '有房无贷款',
  '4': '和家人同住'
}

// 车辆情况映射
const carStatusMap = {
  '1': '无车',
  '2': '有车有贷款',
  '3': '有车无贷款'
}

// 学历映射
const educationMap = {
  '1': '高中及以下',
  '2': '大专',
  '3': '本科',
  '4': '硕士',
  '5': '博士'
}

// 收入水平映射
const incomeLevelMap = {
  '1': '5k以下',
  '2': '5k-10k',
  '3': '10k-20k',
  '4': '20k-50k',
  '5': '50k以上'
}

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    phone: null,
    password: null,
    nickname: null,
    gender: null,
    birthDate: null,
    avatarUrl: null,
    fan: null,
    countFollow: null,
    countLike: null,
    userRole: null,
    registerSource: null,
    openId: null,
    registerTime: null,
    lastLoginTime: null,
    lastLoginIp: null,
    accountStatus: null,
    isVerified: null,
    isVip: null,
    vipExpireTime: null,
    createdAt: null,
    updatedAt: null
  },
  rules: {
    nickname: [
      { required: true, message: "昵称不能为空", trigger: "blur" }
    ],
    gender: [
      { required: true, message: "性别： 0-未知，1-男，2-女不能为空", trigger: "blur" }
    ],
    userRole: [
      { required: true, message: "用户角色：1-普通用户，2-红娘", trigger: "blur" }
    ],
    registerTime: [
      { required: true, message: "注册时间不能为空", trigger: "blur" }
    ],
    accountStatus: [
      { required: true, message: "账号状态：0-冻结，1-正常，2-注销不能为空", trigger: "change" }
    ],
    isVerified: [
      { required: true, message: "是否实名认证：0-否，1-是不能为空", trigger: "blur" }
    ],
    isVip: [
      { required: true, message: "是否VIP：0-否，1-是不能为空", trigger: "blur" }
    ],
    createdAt: [
      { required: true, message: "创建时间不能为空", trigger: "blur" }
    ],
    updatedAt: [
      { required: true, message: "更新时间不能为空", trigger: "blur" }
    ]
  }
})

const { queryParams, form, rules } = toRefs(data)

/** 查询管理用户列表 */
function getList() {
  loading.value = true
  listUser1(queryParams.value).then(response => {
    user1List.value = response.rows
    total.value = response.total
    loading.value = false
  })
}

// 取消按钮
function cancel() {
  open.value = false
  reset()
}

// 表单重置
function reset() {
  form.value = {
    userId: null,
    phone: null,
    password: null,
    nickname: null,
    gender: null,
    birthDate: null,
    avatarUrl: null,
    fan: null,
    countFollow: null,
    countLike: null,
    userRole: null,
    registerSource: null,
    openId: null,
    registerTime: null,
    lastLoginTime: null,
    lastLoginIp: null,
    accountStatus: null,
    isVerified: null,
    isVip: null,
    vipExpireTime: null,
    createdAt: null,
    updatedAt: null
  }
  tbUserProfileList.value = []
  proxy.resetForm("user1Ref")
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef")
  handleQuery()
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.userId)
  single.value = selection.length != 1
  multiple.value = !selection.length
}

/** 新增按钮操作 */
function handleAdd() {
  reset()
  open.value = true
  title.value = "添加管理用户"
}

/** 修改按钮操作 */
function handleUpdate(row) {
  reset()
  const _userId = row.userId || ids.value
  getUser1(_userId).then(response => {
    form.value = response.data
    // 处理时间字段的格式化，确保日期选择器能正确显示
    if (form.value.birthDate) {
      form.value.birthDate = new Date(form.value.birthDate)
    }
    if (form.value.registerTime) {
      form.value.registerTime = new Date(form.value.registerTime)
    }
    if (form.value.lastLoginTime) {
      form.value.lastLoginTime = new Date(form.value.lastLoginTime)
    }
    if (form.value.vipExpireTime) {
      form.value.vipExpireTime = new Date(form.value.vipExpireTime)
    }
    if (form.value.createdAt) {
      form.value.createdAt = new Date(form.value.createdAt)
    }
    if (form.value.updatedAt) {
      form.value.updatedAt = new Date(form.value.updatedAt)
    }
    tbUserProfileList.value = response.data.tbUserProfileList
    open.value = true
    title.value = "修改管理用户"
  })
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["user1Ref"].validate(valid => {
    if (valid) {
      form.value.tbUserProfileList = tbUserProfileList.value
      if (form.value.userId != null) {
        updateUser1(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功")
          open.value = false
          getList()
        })
      } else {
        addUser1(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功")
          open.value = false
          getList()
        })
      }
    }
  })
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _userIds = row.userId || ids.value
  proxy.$modal.confirm('是否确认删除管理用户编号为"' + _userIds + '"的数据项？').then(function() {
    return delUser1(_userIds)
  }).then(() => {
    getList()
    proxy.$modal.msgSuccess("删除成功")
  }).catch(() => {})
}

/** 用户详细资料序号 */
function rowTbUserProfileIndex({ row, rowIndex }) {
  row.index = rowIndex + 1
}

/** 用户详细资料添加按钮操作 */
function handleAddTbUserProfile() {
  let obj = {}
  obj.realName = ""
  obj.age = ""
  obj.height = ""
  obj.weight = ""
  obj.education = ""
  obj.educationCert = ""
  obj.company = ""
  obj.position = ""
  obj.incomeLevel = ""
  obj.workCity = ""
  obj.hometown = ""
  obj.maritalStatus = ""
  obj.hasChildren = ""
  obj.houseStatus = ""
  obj.carStatus = ""
  obj.selfIntroduction = ""
  obj.hobby = ""
  obj.createdAt = ""
  obj.updatedAt = ""
  tbUserProfileList.value.push(obj)
}

/** 用户详细资料删除按钮操作 */
function handleDeleteTbUserProfile() {
  if (checkedTbUserProfile.value.length == 0) {
    proxy.$modal.msgError("请先选择要删除的用户详细资料数据")
  } else {
    const tbUserProfiles = tbUserProfileList.value
    const checkedTbUserProfiles = checkedTbUserProfile.value
    tbUserProfileList.value = tbUserProfiles.filter(function(item) {
      return checkedTbUserProfiles.indexOf(item.index) == -1
    })
  }
}

/** 复选框选中数据 */
function handleTbUserProfileSelectionChange(selection) {
  checkedTbUserProfile.value = selection.map(item => item.index)
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download('user1/user1/export', {
    ...queryParams.value
  }, `user1_${new Date().getTime()}.xlsx`)
}

/** 查看按钮操作 */
function handleView(row) {
  const userId = row.userId
  getUser1(userId).then(response => {
    currentUser.value = response.data
    // 确保用户详细资料列表存在，如果不存在则初始化为空数组
    if (!currentUser.value.tbUserProfileList) {
      currentUser.value.tbUserProfileList = []
    }
    detailVisible.value = true
  }).catch(error => {
    console.error('获取用户详情失败:', error)
    proxy.$modal.msgError("获取用户详情失败")
  })
}

getList()
</script>

<style scoped>
.app-container {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

/* 页面标题样式 */
.page-header {
  margin-bottom: 24px;
  padding: 20px 0;
}

.page-title {
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 8px;
}

.title-icon {
  margin-right: 12px;
  font-size: 28px;
  color: #409eff;
}

.page-description {
  color: #909399;
  font-size: 14px;
  line-height: 1.5;
}

/* 卡片样式 */
.search-card,
.toolbar-card,
.table-card {
  margin-bottom: 20px;
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.search-card:hover,
.toolbar-card:hover,
.table-card:hover {
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* 卡片头部样式 */
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
}

.header-icon {
  margin-right: 8px;
  font-size: 18px;
  color: #409eff;
}

.header-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.table-info {
  display: flex;
  align-items: center;
}

/* 搜索表单样式 */
.search-form {
  padding: 20px 0;
}

.search-input,
.search-select,
.search-date {
  width: 100%;
}

.search-input :deep(.el-input__wrapper) {
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.search-input :deep(.el-input__wrapper:hover) {
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
}

.search-input :deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
}

.search-select :deep(.el-select__wrapper) {
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.search-date :deep(.el-input__wrapper) {
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.search-buttons {
  text-align: center;
  margin-top: 20px;
}

.search-btn {
  padding: 12px 32px;
  border-radius: 8px;
  font-weight: 500;
  margin-right: 16px;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
  transition: all 0.3s ease;
}

.search-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
}

.reset-btn {
  padding: 12px 32px;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.reset-btn:hover {
  transform: translateY(-2px);
}

/* 工具栏样式 */
.toolbar-row {
  padding: 16px 0;
}

.action-btn {
  border-radius: 8px;
  font-weight: 500;
  padding: 10px 20px;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

/* 表格样式 */
.modern-table {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.modern-table :deep(.el-table__header) {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.modern-table :deep(.el-table__row) {
  transition: all 0.3s ease;
}

.modern-table :deep(.el-table__row:hover) {
  background-color: #f0f9ff;
  transform: scale(1.01);
}

.modern-table :deep(.el-table__cell) {
  border-bottom: 1px solid #f0f0f0;
  padding: 16px 12px;
}

.modern-table :deep(.el-tag) {
  border-radius: 6px;
  font-weight: 500;
  padding: 4px 8px;
  border: none;
}

.modern-table :deep(.el-avatar) {
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.action-buttons .el-button {
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
  padding: 6px 12px;
}

.action-buttons .el-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* 分页样式 */
.pagination-container {
  display: flex;
  justify-content: center;
  padding: 24px 0;
  margin-top: 20px;
  border-top: 1px solid #f0f0f0;
}

.pagination-container :deep(.el-pagination) {
  background: transparent;
}

.pagination-container :deep(.el-pager li) {
  border-radius: 6px;
  margin: 0 2px;
  transition: all 0.3s ease;
}

.pagination-container :deep(.el-pager li:hover) {
  transform: translateY(-1px);
}

.pagination-container :deep(.btn-prev),
.pagination-container :deep(.btn-next) {
  border-radius: 6px;
  transition: all 0.3s ease;
}

.pagination-container :deep(.btn-prev:hover),
.pagination-container :deep(.btn-next:hover) {
  transform: translateY(-1px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .app-container {
    padding: 12px;
  }
  
  .page-title {
    font-size: 20px;
  }
  
  .search-form :deep(.el-row) {
    margin: 0 -8px;
  }
  
  .search-form :deep(.el-col) {
    padding: 0 8px;
    margin-bottom: 16px;
  }
  
  .toolbar-row :deep(.el-col) {
    margin-bottom: 8px;
  }
  
  .action-buttons {
    flex-direction: column;
    gap: 4px;
  }
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.search-card,
.toolbar-card,
.table-card {
  animation: fadeInUp 0.6s ease-out;
}

.search-card {
  animation-delay: 0.1s;
}

.toolbar-card {
  animation-delay: 0.2s;
}

.table-card {
  animation-delay: 0.3s;
}

/* 自定义滚动条 */
:deep(.el-table__body-wrapper)::-webkit-scrollbar {
  height: 8px;
}

:deep(.el-table__body-wrapper)::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

:deep(.el-table__body-wrapper)::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
  transition: all 0.3s ease;
}

:deep(.el-table__body-wrapper)::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 统一选择器长度 */
.search-select,
.search-date,
.search-input {
  width: 100% !important;
  min-width: 180px !important;
}

.search-select .el-input,
.search-date .el-input,
.search-input .el-input {
  width: 100% !important;
}

/* 统一表单项高度 */
.search-form .el-form-item {
  margin-bottom: 20px;
}

.search-form .el-form-item .el-form-item__content {
  min-height: 40px;
  display: flex;
  align-items: center;
}

/* 响应式表格样式 */
.responsive-table {
  width: 100%;
  overflow-x: auto;
}

.responsive-table :deep(.el-table__body-wrapper) {
  overflow-x: auto;
}

.responsive-table :deep(.el-table) {
  min-width: 100%;
  table-layout: auto;
}

.responsive-table :deep(.el-table__header-wrapper),
.responsive-table :deep(.el-table__body-wrapper) {
  overflow-x: auto;
}

/* 小屏幕适配 */
@media (max-width: 1200px) {
  .responsive-table :deep(.el-table) {
    font-size: 12px;
  }
  
  .responsive-table :deep(.el-table th),
  .responsive-table :deep(.el-table td) {
    padding: 8px 4px;
  }
  
  .gender-cell,
  .role-cell,
  .source-cell,
  .status-cell,
  .vip-cell {
    flex-direction: column;
    gap: 2px;
  }
  
  .enhanced-actions {
    flex-direction: column;
    gap: 2px;
  }
  
  .enhanced-actions .el-divider {
    display: none;
  }
}

@media (max-width: 768px) {
  .responsive-table :deep(.el-table) {
    font-size: 11px;
  }
  
  .responsive-table :deep(.el-table th),
  .responsive-table :deep(.el-table td) {
    padding: 6px 2px;
  }
  
  .user-avatar {
    width: 35px !important;
    height: 35px !important;
  }
  
  .action-btn-link {
    font-size: 11px;
    padding: 2px 4px;
  }
}

/* 增强表格样式 */
.enhanced-table {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.enhanced-table :deep(.el-table__body tr) {
  transition: all 0.3s ease;
}

.enhanced-table :deep(.el-table__body tr:hover) {
  background: linear-gradient(135deg, #f8f9ff 0%, #e8f4fd 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 表格单元格样式 */
.gender-cell,
.role-cell,
.source-cell,
.status-cell,
.vip-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.avatar-cell {
  display: flex;
  justify-content: center;
  align-items: center;
}

.user-avatar {
  border: 2px solid #e4e7ed;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.user-avatar:hover {
  border-color: #409eff;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

/* 操作按钮样式 */
.enhanced-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.action-btn-link {
  font-weight: 500;
  transition: all 0.2s ease;
}

.action-btn-link:hover {
  transform: translateY(-1px);
}

/* 分页组件样式 */
.enhanced-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  margin-top: 20px;
  border-top: 1px solid #e4e7ed;
  background: linear-gradient(135deg, #fafbfc 0%, #f5f7fa 100%);
  border-radius: 0 0 12px 12px;
  flex-wrap: wrap;
  gap: 10px;
}

.pagination-info {
  display: flex;
  align-items: center;
  color: #606266;
  font-size: 13px;
  flex-shrink: 0;
}

.modern-pagination {
  flex-shrink: 0;
}

.modern-pagination :deep(.el-pagination) {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.modern-pagination :deep(.el-pagination .btn-prev),
.modern-pagination :deep(.el-pagination .btn-next) {
  border-radius: 8px;
  transition: all 0.3s ease;
}

.modern-pagination :deep(.el-pagination .btn-prev:hover),
.modern-pagination :deep(.el-pagination .btn-next:hover) {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(64, 158, 255, 0.2);
}

.modern-pagination :deep(.el-pager li) {
  border-radius: 8px;
  transition: all 0.3s ease;
}

.modern-pagination :deep(.el-pager li:hover) {
  transform: translateY(-1px);
}

/* 分页响应式 */
@media (max-width: 768px) {
  .enhanced-pagination {
    flex-direction: column;
    text-align: center;
    padding: 15px 10px;
  }
  
  .pagination-info {
    font-size: 12px;
    margin-bottom: 10px;
  }
  
  .modern-pagination :deep(.el-pagination) {
    justify-content: center;
  }
  
  .modern-pagination :deep(.el-pagination .el-pagination__sizes),
  .modern-pagination :deep(.el-pagination .el-pagination__jump) {
    display: none;
  }
}

/* 增强选择器样式 */
.enhanced-select {
  transition: all 0.3s ease;
}

.enhanced-select:hover {
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
}

.enhanced-select .el-input__wrapper {
  border-radius: 8px;
  transition: all 0.3s ease;
}

.enhanced-select .el-input__wrapper:hover {
  border-color: #409eff;
  box-shadow: 0 0 0 1px rgba(64, 158, 255, 0.2);
}

/* 自定义选项样式 */
.custom-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.custom-option .option-icon {
  font-size: 16px;
  transition: transform 0.2s ease;
}

.custom-option:hover .option-icon {
  transform: scale(1.1);
}

/* 日期选择器增强样式 */
.el-date-editor {
  border-radius: 8px;
  transition: all 0.3s ease;
}

.el-date-editor:hover {
  border-color: #409eff;
  box-shadow: 0 0 0 1px rgba(64, 158, 255, 0.2);
}

/* 搜索输入框增强样式 */
.search-input .el-input__wrapper {
  border-radius: 8px;
  transition: all 0.3s ease;
}

.search-input .el-input__wrapper:hover {
  border-color: #409eff;
  box-shadow: 0 0 0 1px rgba(64, 158, 255, 0.2);
}

/* 选择器占位符样式 */
.el-select .el-input.is-focus .el-input__wrapper {
  border-color: #409eff;
  box-shadow: 0 0 0 1px rgba(64, 158, 255, 0.2);
}

/* 自定义下拉框全局样式 */
:deep(.el-select-dropdown) {
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
  border: 1px solid #e4e7ed !important;
  overflow: hidden !important;
}

:deep(.el-select-dropdown .el-select-dropdown__item) {
  padding: 12px 16px !important;
  transition: all 0.2s ease !important;
  border-radius: 0 !important;
}

:deep(.el-select-dropdown .el-select-dropdown__item:hover) {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
  color: #409eff !important;
}

:deep(.el-select-dropdown .el-select-dropdown__item.selected) {
  background: linear-gradient(135deg, #409eff 0%, #1890ff 100%) !important;
  color: white !important;
  font-weight: 500 !important;
}
</style>
